<template>
	<page class="workmanship" ref='page'>
		<view class="tabber_box">
			<view class="tabber_box_static" :style="{ height: `${getters.statusBarHeight}px` }"></view>
			<view class="tabber_box_flex" :style="{ height: `${getters.statusBarHeight}px` }"></view>
		</view>
		<view class="tabber_box_title_static">
		</view>
		<view class="tabber_box_title_flex" :style="{ top: `${getters.statusBarHeight}px` }">
			
			<view class="text">
				社区新闻
			</view>
		</view>
		
		<view class="tab_row" v-if="vgtTab && vgtTab.length > 0">
			<vgt-tab style="z-index: 9;" :list="vgtTab" @onValueChange="vgtChange"></vgt-tab>
		</view>
		<view class="list">
			<view class="row" v-for="(item,index) in recommendList" :key="index" @click="gotoDetail(item.id)">
				<view class="left">
					<view class="">
						{{item.title}}
					</view>
					<view class="">
						{{item.label}}
					</view>
					<view class="">
						<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/ZbR1Yj4NNP4VKOdAB2eGJavDG0rck7UOqKroJemp.png" mode="scaleToFill"></image>
						<text>{{item.look_num}}</text>
					</view>
				</view>
				<image :src="item.img" mode="scaleToFill" class="right"></image>
			</view>
		</view>
		
		<foot></foot>
		<tabbar ref='tabbar' active='3' />
		</view>
	</page>
</template>

<script>
	import tabbar from '@/components/tabbar.vue'
	import {getStandard,getStandardNav} from './static/api.js'
	import tabRow from '@/components/tab-row.vue'
	import vgtTab from '@/components/vgt-tab/vgt-tab.vue'
	import foot from '@/components/foot.vue'
	export default {
		components: {
			vgtTab,
			tabbar
		},
		data() {
			return {
				vgtTab:[],
				more:false,
				page:1,
				limit:10,
				recommendList: [],
				nav_id:''
			}
		},
		methods: {
			gotoDetail(id) {
				uni.navigateTo({
					url: `/pagesHome/Processdetails?id=${id}&type=2`
				});
			},
			//列表接口
			getStandard(){
				getStandard({type:2,nav_id:this.nav_id,laiyuan:2,page:this.page,limit:this.limit}).then(res=>{
					let arr = res && res.list.map((item,index)=>{
						return {
							id: item.id,
							title:item.title,
							label:item.title_aux,
							img:item.picture,
							look_num:item.look_num
						} 
					})
					if(this.page>1){
						this.recommendList = this.recommendList.concat(arr);
					}else{
						this.recommendList = arr;
					}
					if(res.list && res.list.length < 10 ){
						this.more = true;
					}
					uni.hideLoading();
				})
			},
			//选择分类，拿到下标  
			vgtChange(e){
				this.nav_id = e.currentInd
				this.page = 1
				this.getStandard()
			},
			getStandardNav(){
				getStandardNav({type:2}).then(res=>{
					let arr = [{name:'全部',id:''}]
					let arrs = arr.concat(res)
					this.vgtTab = arrs;
				})
			}
		},
		onLoad(parms) {
			
			uni.showLoading({
				title: '加载中...'
			});
			this.getStandard();
			this.getStandardNav();
			
			
		},
		onShow(){
			
			var option = this.$global.$editUploadBack(4, 'workmanshipLook')
			if(option && option.id && this.recommendList.findIndex(x=>x.id == option.id) != -1){
				this.recommendList[this.recommendList.findIndex(x=>x.id == option.id)].look_num  = Number(this.recommendList[this.recommendList.findIndex(x=>x.id == option.id)].look_num) + 1
			}
			
			
		},
		onReachBottom() {
			if(!this.more){
				this.page++;
				this.getStandard();
			}
		}
	}
</script>
<style lang="scss" scoped>
	.workmanship {
		background-color: #fff;
	}
	.tab_row {
		padding: 0rpx 36rpx;
	}
	.list{
		padding:30rpx 32rpx;
		width: 100%;
		box-sizing: border-box;
		.row{
			display: flex;
			justify-content: space-between;
			width:100%;
			padding: 40rpx 0;
			border-bottom: 2rpx solid #d8d8d8;
			.left{
				width: calc(100% - 250rpx);
				view:nth-child(1){
					color:#313236;
					font-size: 32rpx;
					line-height: 44rpx;
					font-weight: 700;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
					word-break: break-all;
				}
				view:nth-child(2){
					margin-top: 6rpx;
					color:#ADADAD;
					font-size: 24rpx;
					line-height: 34rpx;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
				}
				view:nth-child(3){
					margin-top: 6rpx;
					color:#ADADAD;
					font-size: 18rpx;
					line-height: 26rpx;
					display: flex;
					align-items: center;
					image{
						width: 28rpx;
						height: 26rpx;
						margin-right: 5rpx;
					}
				}
			}
			.right{
				width: 238rpx;
				height: 128rpx;
				border-radius: 20rpx;
			}
		}
	}
	
	
	
	.tabber_box .tabber_box_static {
		width: 100%;
		background-color: #fff;
	}
	
	.tabber_box .tabber_box_flex {
		width: 100%;
		background-color: #fff;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
	}
	
	.tabber_box_title_static {
		height: 80rpx;
		width: 100%;
		background-color: #fff;
	}
	
	.tabber_box_title_flex {
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 99;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 42rpx;
		font-family: PingFang SC, PingFang SC-Semibold;
		font-weight: 700;
		text-align: center;
		color: #000000;
	
		.left {
			margin-top: 4rpx;
			position: absolute;
			left: 58rpx;
			top: 50%;
			transform: translateY(-50%);
	
			image {
				width: 36rpx;
				height: 36rpx;
			}
	
			text {
				display: inline-block;
				position: absolute;
				left: 34rpx;
				top: 5px;
				width: 10rpx;
				height: 10rpx;
				background: $theme;
				border-radius: 50%;
			}
		}
	}
</style>
